<template>
  <div id="form-category" class="form-category">
    <div v-for="item of DetailType_Account.categoryParam" class="category">
      <div class="titleBox">
        <div class="leftIcon"></div>
        <div class="title">{{ item.title }}</div>
      </div>
      <input v-if="item.data.length <= 1" @input="eidtInputValue($event, item.title)" class="inputSty" type="text"
        v-model="query[item.key]">
      <div v-else class="contentBox">
        <div class="contentText" v-for="e, i of item.data" @click="clickContentText(item, e)" :key="i"
          :class="{ active: e.default }">{{ e.title }}</div>
        <input v-if="isShowIpt[item.key]" type="text" @input="sessionContent[item.title] = query[item.key]"
          class="inputSty" v-model="query[item.key]">
      </div>
    </div>
  </div>
</template>
<script setup>
import Notify from '../../../../node_modules/@vant/weapp/dist/notify/notify';
import { getDetailType_Account, getDetailType } from '@/api/home';
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default: {}
  }
})
const item = ref({})
const query = ref({})
const DetailType_Account = ref({})
const isShowIpt = ref({})
const sessionContent = ref({})

watch(() => props.item, (val) => {
  item.value = val
  getDetailType_AccountMethod()
}, { deep: true })


const eidtInputValue = (e, key) => {
  sessionContent.value[key] = e.target.value
}

const getDetailType_AccountMethod = async () => {
  const res = await getDetailType_Account(item.value.id)
  res.data.categoryParam.forEach((item, index) => {
    item.data.forEach(e => {
      e.default = false
    })

    item.data[0].default = true
    query.value[item.key] = item.data[0].title
    sessionContent.value[item.title] = query.value[item.key]
  })
  DetailType_Account.value = res.data
}

const clickContentText = (item, e) => {
  item.data.forEach(item => {
    item.default = false
  })
  e.default = true
  if (e.title === '自定义') {
    query.value[item.key] = ''
    isShowIpt.value[item.key] = true
  } else {
    query.value[item.key] = e.title
    isShowIpt.value[item.key] = false
    sessionContent.value[item.title] = query.value[item.key]
    Notify({
      message: e.title,
      type: 'primary',
      background: '#83CD88',
      duration: '1000',
      safeAreaInsetTop: true
    });
  }
}

// 暴露属性给外部组件使用
defineExpose({ query, sessionContent })
</script>
<style lang="less" scoped>
.titleBox {
  position: relative;

  .leftIcon {
    position: absolute;
    top: 6rpx;
    left: 0;
    width: 12rpx;
    height: 18rpx;
    background: var(--a-main-color);
    border-radius: 16rpx;
  }
}



.title {
  height: 37rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: var(--a-one-text-color);
  line-height: 33rpx;
  margin-left: 30rpx;

}

.contentText {
  width: 160rpx;
  height: 80rpx;
  box-sizing: border-box;
  // border: 1rpx solid #9c9797;
  background-color: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  color: var(--a-two-text-color);
  text-align: center;
  line-height: 80rpx;
  font-size: 26rpx;
  margin: 0 7rpx 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active {
  background-color: var(--a-main-color);
  color: #FFF;
  border: none;

}




.inputSty {
  box-sizing: border-box;
  display: block;
  width: 690rpx;
  height: 86rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  margin: 15rpx 0;
  color: var(--a-one-text-color);
  padding-left: 20rpx;

}
</style>